<script lang="ts" setup>
import {
  onBeforeMount,
  ref,
  useTemplateRef,
  onMounted,
} from 'vue'
import { storeToRefs } from 'pinia'
import { useRouter } from 'vue-router'
import { useAssistantListStore } from '@/store/assistantListStore'
import AssistantCardMobile from '@/components/AssistantCardMobile.vue'
import { AssistantList, isAndroid } from '@/config'
import { inBox } from '@/utils/getUid'
import back from "@/components/ui/svgs/back.vue"

import type { AssistantProps } from '@/type'

const stickyClass = ref('')
const showSticky = ref(false)
const isLoading = ref(true)
const router = useRouter()
const { getCompletedAssistantList, updateCompletedAssistantList, readAll } =
  useAssistantListStore()
const { completedList, allCompleted } = storeToRefs(useAssistantListStore())

const hdlAssistantCard = async (item: AssistantProps) => {
  router.push({
    name: 'assistant',
    params: {
      id: item.key,
    },
  })
  setTimeout(() => updateCompletedAssistantList(item.key), 2000)
}
const stickyPlaceholder = useTemplateRef('stickyPlaceholder')
const stickyRef = useTemplateRef('stickyRef')

const handleBack = () => {
  if (isAndroid()) {
    history.back()
  } else {
    router.back()
  }
}

onMounted(() => {
  if (stickyPlaceholder.value) {
    const observer = new IntersectionObserver(
      ([entry]) => {
        showSticky.value = !entry.isIntersecting
        stickyClass.value = entry.isIntersecting ? '' : 'fixed'
      },
      {
        root: null,
        threshold: 0,
      },
    )
    observer.observe(stickyPlaceholder.value)
  }
})

onBeforeMount(async () => {
  isLoading.value = true
  await getCompletedAssistantList()
  isLoading.value = false
})
</script>

<template>
  <div
    class="home-bg-abs w-full h-full"
    :class="[!allCompleted && showSticky ? 'no-bg-color' : '']"
  >
    <div
      class="h-[44px] pl-[16px] flex items-center shrink-0"
      @click="handleBack"
    >
      <back v-if="inBox" class="h-[20px] w-[11px]" />
    </div>
    <div class="h-[30px] w-full" ref="stickyPlaceholder"></div>
    <div v-if="allCompleted">
      <div class="relative mt-[88px] mb-[40px] flex flex-col items-center">
        <div class="w-[120px] h-[120px] absolute top-[-130px] z-10">
          <img
            src="/all_completed_pc.png?v=2"
            draggable="false"
            class="w-full h-full object-cover"
          />
        </div>
        <div
          class="text-[#333] text-center text-[30px] font-semibold leading-[42px] z-20"
        >
          恭喜你，完成挑战
        </div>
      </div>
    </div>
    <div
      class="lzc-assistant-mobile-home__sticky top-0"
      :class="stickyClass"
      ref="stickyRef"
      v-else
    >
      <div class="h-[76px] text-center">
        <span class="leading-[76px] text-[#000000] text-[60px] font-bold">
          {{ completedList.length }}
        </span>
        <span class="leading-[44px] text-[#000000] text-[16px] font-bold">
          /{{ AssistantList.length }}
        </span>
      </div>
      <div
        class="text-[#000000] text-[30px] font-medium leading-[42px] text-center mb-[40px]"
      >
        玩机挑战
      </div>
    </div>
    <div class="h-[170px]" v-show="!allCompleted && showSticky"></div>

    <div class="">
      <AssistantCardMobile
        class="mb-[16px]"
        v-for="item in AssistantList"
        v-bind="item"
        :key="item.key"
        :hadCompleted="isLoading || completedList.includes(item.key)"
        @click="hdlAssistantCard(item)"
      />
    </div>
    <div class="m-auto flex justify-center py-6"><button  class="read-all-button" v-if="!allCompleted" @click="readAll()">全部已读</button></div>
  </div>
</template>

<style scoped lang="scss">
.home-bg-abs {
  background: linear-gradient(180deg, #9bb1f4, #fff 316px, #fff);
  overscroll-behavior: none;
  &.no-bg-color {
    background: #fff;
  }
  transition: background 0.6s;
}
.lzc-assistant-mobile-home__sticky {
  z-index: 1000;
  &.fixed {
    background: #fff;
    width: 100%;
  }
}
</style>

<style>
html,
body {
  overscroll-behavior: none;
}
</style>
